import React from 'react';
import './horizontal_1.css';


class Horizontal_1 extends React.Component{
    constructor(props){
        super(props);
        this.state={
            datainfo:props.datainfo.datainfo||[],
            eid:props.eid,
            maxTHeight:'0',
            maxTWidth:'0',
            maxCHeight:'0'
        }
        this.rdCss=this.rdCss.bind(this);
        this.updateData=this.updateData.bind(this);
        this.getChineseLength=this.getChineseLength.bind(this);
        this.getLength=this.getLength.bind(this);
        this.onClickOutSideHandler=this.onClickOutSideHandler.bind(this);
    }
    componentDidMount(){
        this.props.onRef(this);
        this.updateData();

        let {maxTimeLineWidth}=this.state;
        const {eid}=this.state;
        const {datainfo}=this.props;

        let maxWidth=maxTimeLineWidth;
        if(parseInt(maxWidth)<114){
            maxWidth=114;
        }else if(parseInt(maxWidth)>190){
            maxWidth=190;
        }
        let timelinedata1=".timeline-data-"+eid;
        if(datainfo!=null&&datainfo.length>0){
            $(timelinedata1).scrollLeft((datainfo.length)*parseInt(maxWidth+30));
        }
        window.addEventListener('click',this.onClickOutSideHandler,true);

    }

    componentWillUnmount(){
        window.removeEventListener('click',this.onClickOutSideHandler,true);
    }

    onClickOutSideHandler(e){
        const {handleRefresh}=this.props;
        var targetDiv=e.target.className || e.srcElement.className;
        if(targetDiv && targetDiv=='e9header-font-setting-item'){
            setTimeout(handleRefresh,0);
        }
    }

    getChineseLength(str){
        let chinese= str.match(/[\u4e00-\u9fa5]/g);
        if(chinese==null){
            return 0;
        }
        return chinese.length;
    }
    getLength(str){
        if(/[a-z]/i.test(str)){
            return str.match(/[a-z]/ig).length;
        }
        return 0;
    }

    rdCss() {
        var obj = arguments[0];
        var options = arguments[1];
        if (!!obj === false || typeof options === 'undefined') {
            return null;
        }
        if (typeof options === 'string') {
            let res = document.defaultView.getComputedStyle(obj, null)[options];
            res = Number(res.replace('px', ''));
            return res;
        }
        if (typeof options === 'object') {
            for (var i in options) {
                obj.style[i] = options[i];
            }
        }
    }
    updateData(){
        const {datainfo}=this.props;
        const {eid}=this.state;
        let maxTimeLineHeight=0;
        let maxContentHeight=0;
        let maxTimeLineWidth=0;
        if(datainfo!=null&&datainfo.length>0) {
            datainfo.map((item, i) => {

                let timelineDivClass=".timeline-horizontal-1 .data_"+eid+"_"+i+" .dateSpan";
                let timelineDiv=document.querySelector(timelineDivClass);
                let timelineHeight=parseInt(Number(this.rdCss(timelineDiv, 'height')));
                let timelineWidth=parseInt(Number(this.rdCss(timelineDiv, 'width')));

                let contentDivClass=".timeline-horizontal-1 .contentDiv_"+eid+"_"+i;
                let contentDiv=document.querySelector(contentDivClass);
                let contentHeight=parseInt(Number(this.rdCss(contentDiv, 'height')));


                if(parseInt(timelineHeight)>parseInt(maxTimeLineHeight)){
                    maxTimeLineHeight=timelineHeight;
                }
                if(parseInt(contentHeight)>parseInt(maxContentHeight)){
                    maxContentHeight=contentHeight;
                }
                if(parseInt(timelineWidth)>parseInt(maxTimeLineWidth)){
                    maxTimeLineWidth=timelineWidth;
                }
            })
        }
        this.setState({maxTHeight:maxTimeLineHeight,maxCHeight:maxContentHeight,maxTWidth:maxTimeLineWidth});
    }


    render(){
        const {datainfo,contentBgColor}=this.props;
        const {eid}=this.state;
        let {maxTHeight,maxCHeight,maxTWidth}=this.state

        let maxTimeLineHeight=0;
        let maxContentHeight=0;
        let maxTimeLineWidth=0;
        if(datainfo!=null&&datainfo.length>0) {
            datainfo.map((item, i) => {

                let timelineDivClass=".timeline-horizontal-1 .data_"+eid+"_"+i+" .dateSpan";
                let timelineDiv=document.querySelector(timelineDivClass);
                let timelineHeight=parseInt(Number(this.rdCss(timelineDiv, 'height')));
                let timelineWidth=parseInt(Number(this.rdCss(timelineDiv, 'width')));

                let contentDivClass=".timeline-horizontal-1 .contentDiv_"+eid+"_"+i;
                let contentDiv=document.querySelector(contentDivClass);
                let contentHeight=parseInt(Number(this.rdCss(contentDiv, 'height')));


                if(parseInt(timelineHeight)>parseInt(maxTimeLineHeight)){
                    maxTimeLineHeight=timelineHeight;
                }
                if(parseInt(contentHeight)>parseInt(maxContentHeight)){
                    maxContentHeight=contentHeight;
                }
                if(parseInt(timelineWidth)>parseInt(maxTimeLineWidth)){
                    maxTimeLineWidth=timelineWidth;
                }
            })
        }

        if(maxTimeLineHeight==0){
            maxTimeLineHeight=maxTHeight;
        }
        if(maxContentHeight==0){
            maxContentHeight=maxCHeight;
        }
        if(maxTimeLineWidth==0){
            maxTimeLineWidth=maxTWidth;
        }


        let bgColor=contentBgColor;
        if(bgColor=="transparent"){
            bgColor="#ffffff";
        }

        let bStyle={width:'20px',height:'20px',position:'absolute',top:'0',right:'0',left:'-6px'};
        let rightStyle={width:'0',height:'0',display:'block',position:'absolute',top:'0',borderTop:'10px transparent dashed',borderRight:'10px transparent dashed',borderBottom:'10px transparent dashed',borderLeft:'18px solid #adadad'};
        let leftStyle={width:'0',height:'0',display:'block',position:'absolute',top:'0',borderTop:'10px transparent dashed',borderRight:'10px transparent dashed',borderBottom:'10px transparent dashed',borderLeft:'10px solid '+bgColor+''};


        let maxlength=0;
        let maxText="";
        let maxTimeLineText="";
        let maxTimeLineLength=0;
        let maxChineseLength=0;
        if(datainfo!=null&&datainfo.length>0){
            datainfo.map((item,i)=>{
                let contentLength=item.content.length;
                contentLength>maxlength?maxText=item.content:'';
                contentLength>maxlength?maxlength=contentLength:'';
                let chineseLength=this.getChineseLength(item.timeline);
                let timeLineLength=item.timeline.length+parseInt(chineseLength);
                if(timeLineLength>maxTimeLineLength || (timeLineLength==maxTimeLineLength && chineseLength>maxChineseLength)){
                    maxTimeLineText=item.timeline;
                    maxTimeLineLength=timeLineLength;
                    maxChineseLength=parseInt(this.getChineseLength(item.timeline));
                }
            })
        }
        //获取最大内容宽度
        let contentChineseCount=this.getChineseLength(maxText);
        let contentLetter=this.getLength(maxText);
        let maxConetentWidth=parseInt(contentChineseCount)*12+parseInt(contentLetter)*5+(parseInt(maxText.length)-parseInt(contentChineseCount)-parseInt(contentLetter))*8+12;

        //获取最大时间轴宽度
        let timelineChineseCount=this.getChineseLength(maxTimeLineText);
        let timelineLetter=this.getLength(maxTimeLineText);
        let maxTimelineWidth=parseInt(timelineChineseCount)*14+parseInt(timelineLetter)*6+(parseInt(maxTimeLineText.length)-parseInt(timelineChineseCount)-parseInt(timelineLetter))*9+12;


        let maxWidth=maxTimelineWidth
       /* maxWidth=maxTimeLineWidth;*/

        if(parseInt(maxWidth)<114){
            maxWidth=114;
        }else if(parseInt(maxWidth)>190){
            maxWidth=190;
        }

        let maxHeight=parseInt(maxContentHeight)+30+parseInt(maxTimeLineHeight)+50;
        let topHeight=parseInt(maxTimeLineHeight)+40;

        if(maxHeight<150){
            maxHeight=150;
        }
        let eventsWidth=0;
        if(datainfo!=null&&datainfo.length>0){
            let timelinedata=".timeline-data-"+eid;
            $(timelinedata).scrollLeft((datainfo.length)*parseInt(maxWidth+30));
            eventsWidth=(datainfo.length)*(parseInt(maxWidth)+30)+50;
        }
        let style={width:'20px',height:'20px',left:eventsWidth,top:'-10px'};
        return<div className="timeline-horizontal-1">
                {  datainfo!=null&&datainfo.length>0?
                    <div className="timeline" style={{height:maxHeight}}>
                        <div className={"timeline-data timeline-data-"+eid} >
                            <div className="horizontal-1"  style={{width:eventsWidth,top:topHeight}}>
                                <ol style={{listStyle:'none'}}>
                                    {
                                        datainfo.map((item,i)=>{
                                            const leftWidth=(parseInt(maxWidth)+30)*(i)+50;

                                            let contentdata=item.content;
                                            let contentArr=contentdata.split(/\n/g);
                                            return <li>
                                                        <a href="#0" style={{left:leftWidth,width:maxWidth}} className={"num_"+i%4+" data_"+eid+"_"+i}  data-date={item.timeline} >
                                                            <span className={" dateSpan"}  style={{minWidth:'114px',maxWidth:'190px'}} title={item.timeline}>{item.timeline}</span>
                                                            <span className="span"></span>
                                                        </a>
                                                        <div id={"contentDiv"} className={"wea-f12 contentDiv_"+eid+"_"+i} style={{left:leftWidth,wordBreak:'break-all',width:maxWidth,textAlign:'center'}}>
                                                            {
                                                                contentArr.map((item,i)=>{
                                                                    if(item==""){
                                                                        return <span style={{display:'block',height:'20px'}}></span>
                                                                    }
                                                                 return <span style={{paddingLeft:'6px',paddingRight:'6px',display:'block'}}>{item}</span>
                                                                })
                                                             }
                                                         </div>
                                                    </li>
                                        })
                                    }
                                </ol>
                                <div style={style}>
                                    <b className="right" style={bStyle}><i className="right-arrow1" style={rightStyle}></i><i className="right-arrow2" style={leftStyle}></i></b>
                                </div>
                            </div>
                        </div>
                    </div>
                    :
                    <div style={{textAlign:'center'}}><img src="/spa/portal/images/timelinestyle/nodata.png" /></div>
                    }
                </div>

    }

}

export default Horizontal_1;